<template>
	<view class="content">
		<map class="map" @tap="mapClick" :markers="showMarkers" show-location @callouttap="handleMarkerTap"
			:enable-poi="false" @markertap="handleMarkerTap" :polyline='showPolyline' id="map"
			:longitude="centerLongitude" :latitude="centerLatitude" scale="18" width="100%" height="100%"
			enable-overlooking @regionchange='handleRegionchange'>
			<!-- 地图覆盖层 -->
			<cover-view slot="callout">
				<cover-view v-for="item in showMarkers" :key="item.id">
					<cover-view :marker-id="item.id" class='test'>
						<cover-view :class='{callout:true}'>
							<cover-view>{{item.content}}</cover-view>
						</cover-view>
					</cover-view>
				</cover-view>
			</cover-view>
		</map>
		<view class="list1" @click="switchOverlay">
			<switch :checked='overlay.visible' color="#FFCC33" style="transform:scale(0.5)" />
			手绘
		</view>
<!-- 		<view class="list2" @click="showPath">
			<switch :checked='enablePath' color="#FFCC33" style="transform:scale(0.5)" />
			路径
		</view> -->


		<uni-popup ref="popup" background-color:transparent; @change="change">
			<view class="popup-content">
				<view class="background-image">
					<!-- 图片作为背景 -->
					<image class="logo" src="/static/a.png" alt="image"></image>
					<!-- 文字和按钮 -->
					<scroll-view scroll-y="true" class="text">
						<image :src="selectedPoint.imagePath" style="width: 280px;height: 220px;" mode="aspectFill">
						</image>
						<view style="padding: 15px;">{{selectedPoint.description}}</view>
					</scroll-view>
					<view class="btn-container">
						<button class="cancel-btn" @click="handleDetail">查看详情</button>
						<uni-icons type="close" @click="handleCancel" size="40"></uni-icons>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onLoad,
	} from "@dcloudio/uni-app";
	const centerLatitude = ref(28.673524981368303);
	const centerLongitude = ref(121.40787443066574);
	const mappedArray = ref([])
	const areaId = ref(1);
	const showMarkers = ref([]);
	const selectedPoint = ref({});
	const mapContext = ref({});
	const currentLocation = ref({});
	const distance = ref(0);
	const showPolyline = ref([]);
	const points = ref([]);
	const path = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
	const enableOrder = ref(false);
	const overlay = ref({
		visible: true
	})
	const popup = ref();
	onLoad((options) => {
		if (options.areaId) {
			areaId.value = options.areaId
		}
	})
	onMounted(() => {
		uni.authorize({
			scope: 'scope.userLocation', // 指定授权类型为获取用户位置信息
			success(res) {
				console.log('授权成功');
			},
			fail(err) {
				uni.showModal({
					title: '提示',
					content: '导览功能需要定位授权才可使用',
					cancelText: '不授权',
					cancelColor: '#999',
					confirmText: '授权',
					confirmColor: '#f94218',
					success(res) {
						console.log(res)
						if (res.confirm) {
							// 选择弹框内授权
							uni.openSetting({
								success(res) {
									console.log(res.authSetting)
								}
							})
						} else if (res.cancel) {
							// 选择弹框内 不授权
							console.log('用户点击不授权')
						}
					}
				})
			}
		});
		//自动追踪坐标
		uni.startLocationUpdate({
			type: 'gcj02',
			success() {
				console.log('成功开启位置追踪')
			},
			fail(e) {
				console.log('位置追踪开启失败：', e)
			}
		})
		uni.onLocationChange(res => {
			console.log(res)
			renewLocation(res)
		})
		mapContext.value = uni.createMapContext('map', this);
		uni.request({
			url: import.meta.env.VITE_APP_BASE_API + '/point/ua/listPointsByAreaId?areaId=' + areaId.value,
			method: 'GET',
			success(res) {
				points.value = res.data.data
				points.value.forEach(item => {
					if (item.iconPath == '/static/blank.png')
						item.iconPath = '/static/point_false.png'
					item.customCallout = {
						display: 'ALWAYS',
						anchorY: 74,
					}
					item.anchor = {
						x: .5,
						y: 1
					}
				})
				showMarkers.value = points.value
				refreshShowMarker()
			}
		})
		uni.request({
			url: import.meta.env.VITE_APP_BASE_API + '/area/ua/getAreaById?id=' + areaId.value,
			method: 'GET',
			success(res) {
				centerLatitude.value = res.data.data.latitude
				centerLongitude.value = res.data.data.longitude
			}
		})
		uni.request({
			url: import.meta.env.VITE_APP_BASE_API + '/area/ua/listLayerByAreaId?areaId=' + areaId.value,
			method: 'GET',
			success(res) {
				mappedArray.value = res.data.data.map(item => ({
					id: item.id,
					src: item.imgUrl,
					bounds: {
						southwest: {
							latitude: item.swlatitude,
							longitude: item.swlongitude
						},
						northeast: {
							latitude: item.nelatitude,
							longitude: item.nelongitude
						}
					},
					visible: true, // Assuming visibility is true by default
					alpha: 1.0 // Assuming alpha is 1.0 by default
				}));
				mappedArray.value.forEach((item) => {
					mapContext.value.addGroundOverlay(item);
				})
			}
		})
	})

	const renewLocation = (location) => {
		// Implement your logic here
	};

	const switchOverlay = () => {
		if (overlay.value.visible) {
			mappedArray.value.forEach((item) => {
				mapContext.value.removeGroundOverlay({
					id: item.id
				});
			})
			overlay.value.visible = !overlay.value.visible;
		} else {
			mappedArray.value.forEach((item) => {
				mapContext.value.addGroundOverlay(item);
			})
			overlay.value.visible = !overlay.value.visible;
		}
	};

	const refreshShowMarker = () => {
		showMarkers.value = points.value;
	};

	const handleMarkerTap = (e) => {
		points.value.forEach(item => {
			if (item.id == e.markerId) {
				selectedPoint.value = item;
				popup.value.open('center')
			}
		});
	};
	const calculateDistance = (point1, point2) => {
		// 将角度转换为弧度
		function toRadians(degrees) {
			return degrees * Math.PI / 180;
		}

		var R = 6371e3; // 地球半径，单位为米
		var lat1 = toRadians(point1.latitude);
		var lat2 = toRadians(point2.latitude);
		var deltaLat = toRadians(point2.latitude - point1.latitude);
		var deltaLon = toRadians(point2.longitude - point1.longitude);

		var a = Math.sin(deltaLat / 2) * Math.sin(deltaLat / 2) +
			Math.cos(lat1) * Math.cos(lat2) *
			Math.sin(deltaLon / 2) * Math.sin(deltaLon / 2);
		var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

		var distance = R * c; // 计算得到距离（单位：米）
		return distance.toFixed(2); // 返回距离
	}
	const handleRegionchange = (e) => {
		if (e.causedBy == "drag") {
			//越界处理
			// console.log(e.target.centerLocation.latitude)
			// console.log(e.target.centerLocation.longitude)
			// if (e.target.centerLocation.latitude < 28.672647 && e.target.centerLocation.longitude < 121.406747) {
			// 	console.log('西南越界')
			// 	mapContext.value.moveToLocation({
			// 		latitude: 28.672647,
			// 		longitude: 121.406747
			// 	})
			// } else if (e.target.centerLocation.latitude > 28.676872 && e.target.centerLocation.longitude >
			// 	121.409111) {
			// 	console.log('东北越界')
			// 	mapContext.value.moveToLocation({
			// 		latitude: 28.676872,
			// 		longitude: 121.409111
			// 	})
			// } else if (e.target.centerLocation.latitude > 28.676872 && e.target.centerLocation.longitude <
			// 	121.406747) {
			// 	console.log('西北越界')
			// 	mapContext.value.moveToLocation({
			// 		latitude: 28.676872,
			// 		longitude: 121.406747
			// 	})
			// } else if (e.target.centerLocation.latitude < 28.672647 && e.target.centerLocation.longitude >
			// 	121.409111) {
			// 	console.log('东南越界')
			// 	mapContext.value.moveToLocation({
			// 		latitude: 28.672647,
			// 		longitude: 121.409111
			// 	})
			// } else if (e.target.centerLocation.latitude < 28.672647) {
			// 	console.log('南越界')
			// 	mapContext.value.moveToLocation({
			// 		latitude: 28.672647,
			// 		longitude: e.target.centerLocation.longitude
			// 	})
			// } else if (e.target.centerLocation.longitude < 121.406747) {
			// 	console.log('西越界')
			// 	mapContext.value.moveToLocation({
			// 		latitude: e.target.centerLocation.latitude,
			// 		longitude: 121.406747
			// 	})
			// } else if (e.target.centerLocation.latitude > 28.676872) {
			// 	console.log('北越界')
			// 	mapContext.value.moveToLocation({
			// 		latitude: 28.676872,
			// 		longitude: e.target.centerLocation.longitude
			// 	})
			// } else if (e.target.centerLocation.longitude > 121.409111) {
			// 	console.log('东边越界')
			// 	mapContext.value.moveToLocation({
			// 		latitude: e.target.centerLocation.latitude,
			// 		longitude: 121.409111
			// 	})
			// }
		}
	}
	const handleCancel = () => {
		console.log('取消按钮被点击');
		popup.value.close(); // 关闭弹窗
	};
	const handleDetail = () => {
		uni.navigateTo({
			url: '/pages/detail/detail?id=' + selectedPoint.value.id
		})
	}
</script>
<style lang="less">
	.map {
		width: 750rpx;
		/* #ifdef H5 */
		width: 100%;
		/* #endif */
		height: 120vh;
		background-color: #f0f0f0;
	}

	.list1 {
		position: absolute;
		top: 30px;
		right: 10px;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		padding: 0px;
		width: 35px;
		height: 47px;
		align-items: center;
		border-radius: 5px;
		font-size: 12px;
	}

	.list2 {
		position: absolute;
		top: 90px;
		right: 10px;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		padding: 0px;
		width: 35px;
		height: 47px;
		align-items: center;
		border-radius: 5px;
		font-size: 12px;
	}

	.bottom-box {
		position: fixed;
		bottom: 20px;
		width: 90%;
		height: 145px;
		background-color: #fff;
		margin-left: 5%;
		overflow: hidden;

		.main_audio {
			width: 100%;
			margin-top: 5px;
			height: 140px;
		}

		.detail-button {
			height: 30px;
			width: 100px;
			margin-top: 5px;
			margin-bottom: 5px;
			/* 按钮内边距 */
			font-size: 12px;
			/* 文字大小 */
			text-align: center;
			/* 文字居中 */
			cursor: pointer;
			/* 鼠标样式 */
			text-decoration: none;
			/* 去掉下划线 */
			color: white;
			/* 文字颜色 */
			background-color: #007BFF;
			/* 背景颜色 */
			border: none;
			/* 去掉边框 */
			border-radius: 15px;
			/* 边角圆滑度 */
			box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
			/* 盒子阴影 */
			transition: all 0.3s ease;
			/* 过渡效果 */
			left: 50%;
			/* 从左边开始50%的位置 */
			transform: translateX(-50%);
			/* 偏移自己的50%来完全居中 */
		}

		.list3 {
			position: absolute;
			top: -220px;
			right: 10px;
			display: flex;
			flex-direction: column;
			background-color: #fff;
			padding: 0px;
			align-items: center;
			border-radius: 5px;
			font-size: 12px;
		}

		.content {
			display: flex;
			flex-direction: row;
			height: 350rpx;
			margin: 10px 10px;

			view {
				margin-bottom: 1px;
			}

			.type {
				height: 28rpx;
				background-color: #5f94ff;
				color: white;
				font-size: 19rpx;
				border-radius: 4rpx;
				text-align: center;
				padding: 0 6rpx;
				margin-right: 5px;
			}

			.head {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					font-weight: bold;
					font-size: 19px;
				}

			}

			.typeList {
				display: flex;
			}

			.small {
				font-size: 19rpx;
			}

			.bigPrice {
				color: #f35b48;
				font-size: 19px;
			}

			.title {
				display: block;
				width: 30%;
				height: 135px;
				justify-content: center;

				.img {
					height: 85px;
					width: 100%;
				}

				.detail {
					height: 30px;
					width: 100px;
					margin-top: 5px;
					/* 按钮内边距 */
					font-size: 12px;
					/* 文字大小 */
					text-align: center;
					/* 文字居中 */
					cursor: pointer;
					/* 鼠标样式 */
					text-decoration: none;
					/* 去掉下划线 */
					color: white;
					/* 文字颜色 */
					background-color: #007BFF;
					/* 背景颜色 */
					border: none;
					/* 去掉边框 */
					border-radius: 5px;
					/* 边角圆滑度 */
					box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
					/* 盒子阴影 */
					transition: all 0.3s ease;
					/* 过渡效果 */
					position: absolute;
					/* 绝对定位 */
					left: 50%;
					/* 从左边开始50%的位置 */
					transform: translateX(-50%);
					/* 偏移自己的50%来完全居中 */
				}


			}

			.description {
				display: block;
				margin-left: 5px;
				width: 60%;
				height: 135px;
				justify-content: center;

				.text {
					height: 85px;
					overflow: hidden;
					/* 隐藏超出元素框的内容 */
					text-overflow: ellipsis;
					/* 超出部分显示省略号 */
					font-size: 14px;
				}

				.audio {
					height: 30px;
					width: 100px;
				}
			}
		}
	}


	.amazing-button-disable {
		position: absolute;
		top: -100px;
		width: 400rpx;
		left: 50%;
		/* 设置元素的左边距为父元素宽度的50% */
		transform: translateX(-50%);
		padding: 10px 20px;
		font-size: 18px;
		text-align: center;
		cursor: pointer;
		outline: none;
		color: #fff;
		background-color: #c1c1c1;
		border: none;
		border-radius: 50px;
		box-shadow: 0 9px #999;
		transition: all 0.3s;
	}

	.amazing-button {
		white-space: nowrap;
		position: absolute;
		top: -100px;
		width: auto;
		left: 50%;
		/* 设置元素的左边距为父元素宽度的50% */
		transform: translateX(-50%);
		padding: 10px 20px;
		font-size: 18px;
		text-align: center;
		cursor: pointer;
		outline: none;
		color: #fff;
		background-color: #FF5722;
		background-image: linear-gradient(45deg, #FFC107 0%, #FF5722 100%);
		border: none;
		border-radius: 50px;
		box-shadow: 0 9px #999;
		transition: all 0.3s;
	}

	/* 当按钮被点击时的样式 */
	.amazing-button:active {
		background-image: linear-gradient(45deg, #F44336 0%, #FFC107 100%);
		box-shadow: 0 3px #333;
		transform: translateX(-50%) translateY(6px);
	}

	.callout {
		display: flex;
		flex-direction: row;
		justify-content: center;
		position: relative;
		margin-bottom: 5px;
		background: #E0E0E0;
		/* 轻灰色背景 */
		border-radius: 50%;
		/* 圆角边框 */
		padding: 5px 10px;
		/* 内边距 */
		max-width: 300px;
		/* 最大宽度 */
		color: #333;
		/* 文字颜色 */
		// box-shadow:
		// 	inset 2px 2px 5px rgba(255, 255, 255, 0.2),
		// 	/* 内部高光效果 */
		// 	inset -3px -3px 7px rgba(0, 0, 0, 0.2);
		// /* 内部深色阴影效果 */
		font-size: 12px;
		outline: none;
		/* Removes the default focus outline */
		// border: 2px solid rgba(0, 0, 0, 0.7);

	}

	.popup_title {
		height: 100px;
		width: 300px;
		text-align: center;
		/* 文本居中 */
		font-size: 32px;
		/* 设置字体大小 */
		margin-top: 50px;
		color: #fff8d5;
		font-family: 'KaiTi', Times, serif;
		font-weight: 1000;
	}

	.popup-content {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		padding: 20px;
	}

	.background-image {
		position: relative;
		width: 330px;
		/* 设置背景图片容器的宽度 */
		height: 800px;
		/* 设置背景图片容器的高度 */
		top:50px;
		background-image: url('/static/a.png');
		/* 背景图片路径 */
		background-size: cover;
		background-position: center;
	}

	.logo {
		height: 300px;
		width: 330px;
		/* 设置背景图片容器的高度 */
	}

	.text {
		position: absolute;
		background-color: #fff;
		height: 350px;
		top: 100px;
		/* 根据需要调整文本的位置 */
		left: 50%;
		border-radius: 20px;
		/* 让文本居中 */
		transform: translateX(-50%);
		border-radius: 50;
		text-align: center;
		color: #000;
		/* 设置文本颜色 */
		width: 324px;
		padding-left: 3px;
		padding-right: 3px;
	}

	.btn-container {
		position: absolute;
		top: 60%;
		left: 50%;
		/* 让按钮行居中 */
		transform: translateX(-50%);
		margin: 15rpx;
		text-align: center;
	}	
	.cancel-btn {
		background-color: #ffffff;
		border: 1px solid gray;
		color: #000;
		border-radius: 50rpx;
		margin: 5px;
	}
</style>